<template>
  <div class="box-full flex-col bgfff box-border overflow-hidden">
    <div class="flex flex-a-c flex-j-b w-full mb-20 pt-20">
      <a-input-search allow-clear size="small" placeholder="输入群名称检索" v-model="searchValue" />
    </div>
    <div class="w-full flex-1 m-relative">
      <a-radio-group class="m-absolute t-0 b-0 r-0 l-0 overflow-hidden h-100n" v-model="selectedId">
        <a-table
          :columns="columns"
          :data="tableData"
          :show-header="false"
          row-key="id"
          :bordered="false"
          :pagination="false"
          :loading="loading"
          :scroll="{ y: 330 }"
        >
          <template #groupInfo="{ rowIndex, record }">
            <div class="flex flex-a-c">
              <!-- <div class="w-30 mr-6 flex flex-j-c">{{ rowIndex + 1 }}</div> -->
              <a-image
                width="42"
                height="42"
                class="mx-4"
                :preview="false"
                style="border-radius: 4px"
                :src="record.pic"
              />
              <div class="flex-col ml-6">
                <span>{{ record.name }}</span>
                <div class="flex flex-wrap">
                  <a-tag
                    bordered
                    size="mini"
                    class="mr-4 mt-4"
                    color="blue"
                    v-for="(tag, index) in JSON.parse(record.label)"
                    :key="index"
                    >{{ tag }}</a-tag
                  >
                </div>
              </div>
            </div>
          </template>
          <template #action="{ record }">
            <div class="flex flex-a-c flex-j-e">
              <a-popover position="left">
                <a-button type="primary" status="warning" class="mr-10" size="mini">
                  <template #icon>
                    <icon-book />
                  </template>
                  <template #default>介绍</template>
                </a-button>
                <template #content>
                  <div class="introduce">{{ record.introduce }}</div>
                </template>
              </a-popover>
              <!-- <a-button type="primary" status="warning" size="mini" class="mr-10">
                <template #icon>
                  <icon-eye />
                </template>
                <template #default>预览</template>
              </a-button> -->
              <a-radio
                :value="record.id"
                :disabled="
                  record.groupNo === currentGroup?.Wxid || disabledGroup?.includes(record.groupNo)
                "
              >
                <template #radio="{ checked }">
                  <a-space
                    align="start"
                    class="custom-radio-card"
                    :class="{ 'custom-radio-card-checked': checked }"
                  >
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot" />
                    </div>
                    <div>
                      <div className="custom-radio-card-title">选择</div>
                    </div>
                  </a-space>
                </template>
              </a-radio>
            </div>
          </template>
        </a-table>
      </a-radio-group>
    </div>
  </div>
</template>
<script setup>
import { IconBook, IconEye } from '@arco-design/web-vue/es/icon'
import $bus from '@renderer/common/js/bus'
const props = defineProps(['officialGroupList', 'currentGroup', 'disabledGroup'])
const emit = defineEmits(['handleSource'])
const loading = ref(false)
const searchValue = ref()
const tableDataO = reactive([])
const selectedId = ref()
const shouldUpdate = ref(true)
const columns = [
  {
    title: '群信息',
    slotName: 'groupInfo',
    width: 100
  },
  {
    title: '操作',
    slotName: 'action',
    width: 50
  }
]

// 官方源头群被选择
watch(
  () => selectedId.value,
  (newVal) => {
    if (shouldUpdate.value) {
      const result = tableData.value.find((item) => item.id == newVal)
      emit('handleSource', result)
    } else shouldUpdate.value = true
  }
)

const tableData = computed(() => {
  if (searchValue.value) {
    return tableDataO.filter((item) => item.name.includes(searchValue.value))
  } else {
    return tableDataO.slice() // 使用 slice() 创建 tableDataO 的浅拷贝
  }
})

tableDataO.splice(0, tableDataO.length, ...props.officialGroupList)
// 源头选择回显
const handleEcho = (item) => {
  if (item) {
    selectedId.value = item.Id
  } else {
    if (selectedId.value) {
      shouldUpdate.value = false
      selectedId.value = undefined
    }
  }
  const list = JSON.parse(JSON.stringify(props.officialGroupList))
  const selectedIndex = list.findIndex((item) => item?.id === selectedId.value)
  if (selectedIndex !== -1) {
    // 将找到的项移动到数组的开头
    const selected = list.splice(selectedIndex, 1)[0]
    tableDataO.splice(0, tableDataO.length, selected, ...list)
  } else {
    // 如果未找到特定项，则直接将整个列表复制到 tableDataO 中
    tableDataO.splice(0, tableDataO.length, ...list)
  }
}

// 清空选择监听
onMounted(() => {
  $bus.on('clearChoose1', () => {
    if (selectedId.value) {
      shouldUpdate.value = false
      selectedId.value = undefined
    }
  })
})

onUnmounted(() => {
  $bus.off('clearChoose1')
})

defineExpose({ handleEcho })
</script>
<style scoped>
.introduce {
  max-width: 300px;
}

.custom-radio-card {
  border: 1px solid var(--color-border-2);
  border-radius: 2px;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
}

.custom-radio-card-mask {
  height: 12px;
  width: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 12px;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>
